<!DOCTYPE html>
<html>

<head>
	<!--viewport-fit=cover:Fill the whole screen on iPhone X-->
	<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
	<title>(っ °Д °;)っ</title>
	<link rel="stylesheet" href="/utils/style.css">
	<link rel="stylesheet" href="./style.css">
	<script src="/lib/oggmented-bundle.js"></script>
	<script src="//cdn.jsdelivr.net/gh/Kaiido/createImageBitmap@master/dist/createImageBitmap.js"></script>
	<script src="//cdn.jsdelivr.net/gh/gildas-lormeau/zip.js@master/dist/zip.min.js"></script>
	<script src="//cdn.jsdelivr.net/gh/flozz/StackBlur@master/dist/stackblur.min.js"></script>
	<script src="//cdn.jsdelivr.net/gh/hapjs/md5-js@master/md5.min.js"></script>
	<script async src="/utils/stat.js"></script>
	<script defer src="/utils/main.js"></script>
</head>

<body>
	<div class="main">
		<h1 class="title"></h1>
		<p class="info"></p>
		<p class="profile">
			将<a id="qwq">谱面等资源文件(点击查看说明)</a>打包成zip然后上传；<br>
			读取完成后调节相关参数，最后点击“播放”按钮。<br>
			播放时双击画面：左上角暂停；右上角重新开始；右下角全屏。
		</p>
		<div id="uploads" class="upload">
			<input type="button" id="demo" value="Demo">
			<input type="file" accept="application/x-zip-compressed" id="upload">
			<label for="upload">选择zip</label>
			<input type="text" style="width:0;flex-grow:1;flex-shrink:1;pointer-events:none" id="filename">
		</div>
		<input type="button" value="重置" onclick="location.reload(true)">
		<div id="select">
			<div>谱面：<select id="select-chart" style="width:6em"></select></div>
			<div>音乐：<select id="select-bgm" style="width:6em"></select></div>
			<div>图片：<select id="select-bg" style="width:6em"></select></div><br>
			<div>宽高比：<select id="select-aspect-ratio" style="width:4em">
					<option value="1.25">5:4</option>
					<option value="1.333333">4:3</option>
					<option value="1.428571">10:7</option>
					<option value="1.461538">19:13</option>
					<option value="1.6">8:5</option>
					<option value="1.666667">5:3</option>
					<option value="1.692308">22:13</option>
					<option value="1.777778" selected>16:9</option>
				</select>
			</div>
			<div>按键缩放：<select id="select-scale-ratio" style="width:4em">
					<option value="1e4">极小</option>
					<option value="9e3">较小</option>
					<option value="8e3" selected>默认</option>
					<option value="7e3">较大</option>
					<option value="6e3">极大</option>
				</select>
			</div>
			<div>背景变暗：<select id="select-global-alpha" style="width:4em">
					<option value="1">黑暗</option>
					<option value="0.8">昏暗</option>
					<option value="0.6" selected>默认</option>
					<option value="0.4">较亮</option>
					<option value="0.2">明亮</option>
				</select>
			</div><br>
			<div>歌名：<input id="input-name" class="input" style="width:7em" placeholder="Untitled"></div>
			<div>等级：<input id="input-level" class="input" style="width:7em" placeholder="SP  Lv.?"></div><br>
			<div>曲绘：<input id="input-illustrator" class="input" style="width:7em" placeholder="nameless"></div>
			<div>谱师：<input id="input-designer" class="input" style="width:7em" placeholder="nameless"></div><br>
			<div><input type="checkbox" id="feedback" checked><label for="feedback">触摸反馈</label></div>
			<div><input type="checkbox" id="imageBlur" checked><label for="imageBlur">背景模糊</label></div>
			<div><input type="checkbox" id="highLight" checked><label for="highLight">多押高亮</label></div><br>
			<div><input type="checkbox" id="hitSong" checked><label for="hitSong">开启打击音效</label></div>
			<div><input type="checkbox" id="lineColor" checked><label for="lineColor">FC/AP指示器</label></div><br>
			<div><input type="checkbox" id="showPoint"><label for="showPoint">显示定位点</label></div>
			<div class="disabled-when-playing"><input type="checkbox" id="autoplay" checked><label for="autoplay">AutoPlay</label></div>
			<div class="disabled-when-playing"><input type="checkbox" id="showTransition" checked><label for="showTransition">过渡动画</label></div>
			<div class="disabled-when-playing"><input type="checkbox" id="videoRecorder"><label for="videoRecorder">视频录制</label></div><br>
			<div class="disabled-when-playing">谱面延时(ms)：<input id="input-offset" type="number" step="5" class="input" style="width:4em" placeholder="0"></div>
			<div><input id="btn-play" type="button" value="播放"> <input id="btn-pause" type="button" value="暂停"></div>
		</div>
		<div><strong id="msg-out">&ensp;</strong></div>
		<div id="stage">
			<canvas id="canvas" class="fade"></canvas>
			<div id="mask">
				<div>Tips: Do not distribute the URL in case the proliferation of low-tech videos!</div>
				<div>为维护社区良好环境，避免低技术视频泛滥，请不要直接传播模拟器网址！</div>
			</div>
		</div>
		<div id="cover-dark" class="fade"></div>
		<div id="cover-view" class="fade">
			<div id="view-nav">
				<a id="use">模拟器使用说明</a>
				<a id="res">资源文件说明</a>
				<a id="faq">常见问题</a>
				<a id="msg">信息</a>
			</div>
			<div id="view-content">
				<iframe id="view-doc" src="" frameborder="0"></iframe>
				<div id="view-msg"></div>
			</div>
		</div>
	</div>
	<noscript><strong style="color:red">此浏览器不支持JavaScript，该脚本无法运行。</strong></noscript>
	<script src="./script.js"></script>
</body>

</html>